.web-ide{
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
    .web-ide-sidebar{
        display: flex;
        flex-direction: row;
        position: relative;
        .web-ide-file{
            display: flex;
            flex-direction: row;
            .web-ide-tree{
                width: 100%;
                background: var(--backdrop-color);
                padding: 0 15px;
                .tree-item-firsts{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 25px;
                    line-height: 25px;
                    cursor: pointer;
                    padding: 0 5px;
                    &:hover{
                        background: var(--tiklab-gray-300);
                    }
                }
                .tree-item-first{
                    display: flex;
                    align-items: center;
                    width: calc(100% - 15px);
                }
                .tree-item-active{
                    background: var(--tiklab-gray-400);
                }
                .tree-item-name{
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                }
                .tree-item-icon{
                    padding-right: 8px;
                }
                .tree-item-hidden{
                    display: none;
                }
                .tree-item-time{
                    font-size: var(--tiklab-font-13);
                    color: #999;
                }
            }
            .web-ide-move{
                cursor: ew-resize;
                height: 100%;
                width: 16px;
                background: rgba(255, 255, 255, 0);
                position: absolute;
                display: flex;
                justify-content: center;
                &:hover .web-ide-move-hidden{
                    background: var(--tiklab-blue);
                }
                .web-ide-move-show,.web-ide-move-hidden{
                    height: 100%;
                    width: 2px;
                }
                .web-ide-move-show{
                    background: var(--tiklab-blue);
                }
            }
        }
    }
    .web-ide-content{
        flex: 1;
    }
}
